<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		a{
			text-decoration: none;
			
			
			
		}
	</style>
	<body>
		<h3>JavaScript访问DOM树案例</h3>
		<h4>JavaScript使用api的4种方式,访问h3标签,a标签获取他们的内容</h4>
		<h5>tagNanme、 className 、name、id</h5>
		<a href="http://www.taobao.com" target="_blank" >淘宝</a>
		<a  class="jd" href="http://www.jingdong.com" target="_blank">京东</a>
		<a name="pdd" href="http://www.pinduoduo.com" target="_blank">拼多多</a>
		<a id="hao123" href="http://hao123.com" target="_blank">Java培优</a>
		<!--页面上是由javascript，通过script标签来实现
		type ="text/javascript"新保准可以省略，默认
		scr=""引入外部js jquery.js
		js中可以使用"" 或 ‘’来吧字符串括起来-->
		<script >

			//alert(document.getElementsByTagName("a")[0]);//BOM中提供的API
			//alert(document.getElementsByTagName("a")[0].innerText)
			console.log(document.getElementsByTagName("a")[0].innerText);
			console.log(document.getElementsByTagName("a")[0].href);
						<!--获取页面a标签，按tagNAme方式返回是一个数组得到页面上所有的a元素 第一个元素a[0]-->
			//第二种方式:className方式
			console.log(document.getElementsByClassName("jd")[0].innerText);
			console.log(document.getElementsByClassName("jd")[0].href);
			//第三种方式 Name方式
			console.log(document.getElementsByName("pdd")[0].innerText);
			console.log(document.getElementsByName("pdd")[0].href);
			//第四种方式:id 这种方式获得就是一个值，无需数组方式
			console.log(document.getElementById("hao123").innerText);
			console.log(document.getElementById("hao123").href);
			
			
			//能否修改页面值，html做不了写死的，css也做不了美化，js可以
			//淘宝改成天猫
			document.getElementsByTagName("a")[0].innerText ="天猫";
			var a =document.getElementsByTagName("a")[0];
			a.innerText ="百度";
			a.href= "https://www.baidu.com";
			
		</script>
	</body>
</html>
